@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;
@use './input-control/input-control-theme' as iControl;
@use './swiper/swiper-theme' as swiper;
@use './tab-group/tabgroup-theme' as tabgroup;
@use './financial/accounting-statement/accounting-statement-theme' as statement;
@use './indicator-card/indicator-card-theme' as indicator-card;
@use './filter-bar/filter-bar-theme' as filter-bar;
@use './pivot-grid/pivot-grid-theme' as pivot-grid;
@use './kpi/kpi-card-theme' as kpi;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);

  @include iControl.color($config-or-theme);
  @include swiper.color($config-or-theme);
  @include tabgroup.color($config-or-theme);
  @include statement.color($config-or-theme);
  @include indicator-card.color($config-or-theme);
  @include filter-bar.color($config-or-theme);
  @include pivot-grid.color($config-or-theme);
  @include kpi.color($config-or-theme);

  .pac-widget__card {
    flex: 1;
    box-shadow: unset;
    background: unset;
    border-radius: 0;
    max-width: 100%;
  }

  .pac-widget__slicer-menu.mat-mdc-menu-panel {
    @apply px-4 max-w-[600px];
  }
  .pac-widget__action-toolbar {
    .mat-icon-button {
      width: 24px;
      height: 24px;
      line-height: 24px;
      opacity: .1;

      .mat-icon {
        font-size: 20px;
        line-height: 20px;
        height: 20px;
        width: 20px;
      }
    }
  }

  .ngm-story-widget {
    &.ngm-story-widget__active, &:hover {
      .pac-widget__action-toolbar {
        .mat-icon-button {
          opacity: 1;
        }
      }
    }

    .semantic-color_positive {
      color: green;
    }
    .semantic-color_negative {
      color: mat.get-color-from-palette($warn, 500);
    }
  }
  
  //@todo 未完成
  .ngm-menu-trigger.active {
    opacity: 1;
  }

  .ngm-story-widget__placeholder-title {
    opacity: .5;
  }
}

@mixin density($config-or-theme) {
  @include filter-bar.density($config-or-theme);
  @include iControl.density($config-or-theme);
  @include kpi.density($config-or-theme);
  @include statement.density($config-or-theme);
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
